<template>
  <div>
    <TopNav title="主题风格" :bgc="$colorObj.color" />
    <div class="themeWrap">
      <div class="themes">
        <ThemeItem
          @themeBtn="handleTheme(item.id)"
          v-for="item in colorList"
          :key="item.id"
          :themeData="item"
          :current="item.id == current"
        />
      </div>
    </div>
  </div>
</template>

<script>
import TopNav from "@/components/TopNav";
import ThemeItem from "@/components/ThemeItem";
export default {
  components: {
    TopNav,
    ThemeItem,
  },
  data() {
    return {
      current: this.$colorObj.id,
      colorList: [
        {
          id: 0,
          color: "#ff461f",
          colorText: "朱砂红",
        },
        {
          id: 1,
          color: "#c93756",
          colorText: "樱桃红",
        },
        {
          id: 2,
          color: "#8d4bbb",
          colorText: "紫色",
        },
        {
          id: 3,
          color: "#00e500",
          colorText: "原谅绿",
        },
        {
          id: 4,
          color: "#ff2121",
          colorText: "姨妈红",
        },
        {
          id: 5,
          color: "#057748",
          colorText: "松花绿",
        },
        {
          id: 6,
          color: "#4c221b",
          colorText: "紫檀色",
        },
        {
          id: 7,
          color: "#c32136",
          colorText: "枣红色",
        },
        {
          id: 8,
          color: "#9d2933",
          colorText: "胭脂红",
        },
        {
          id: 9,
          color: "#cca4e3",
          colorText: "丁香色",
        },
        {
          id: 10,
          color: "#4b5cc4",
          colorText: "宝蓝色",
        },
        {
          id: 11,
          color: "#8b968d",
          colorText: "豆がら茶",
        },
      ],
    };
  },
  methods: {
    handleTheme(id) {
      this.current = id;
      this.$colorObj.id = id;
      this.$colorObj.color = this.colorList[id].color;
    },
  },
};
</script>

<style lang="less" scoped>
.themeWrap {
  padding-top: 46 / 360 * 100vw;
}
</style>
